/* pages/canvasDemo/canvasDemo.wxss */
.percent-mask{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 90;
}
.canvasBox{
  width: 444rpx;
  height: 290rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  position: absolute;
  left: 50%;
  margin-left: -222rpx;
  top: 50%;
  margin-top: -145rpx;
}
.bigCircle{
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 40rpx auto 0;
  background-color: #E5F3FF;
}
.littleCircle{
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 60rpx auto 0;
  background-color: #ffffff;
}
.canvas{
  width: 150rpx;
  height: 150rpx;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: 40rpx auto 0;
  z-index: 99;
}
.desc{
  font-size: 20rpx;
  color: #999999;
  position: absolute;
  bottom: 50rpx;
  width: 100%;
  text-align: center;
}